<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3" xmlns:head="http://www.w3.org/1999/html">

<head th:include="public/public_css::public_css ('订单渠道管理')" />
<link href="zxsdwms/plugin/font-awesome/css/font-awesome.css/font-awesome.min.css" rel="stylesheet">
<body>
<div class="row">
    <div class="col-xs-6">
        <div style="padding: 15px">
        <form class="form-horizontal" role="form" id="details_form">
            <div class="form-group" style="display: none">
                <div class="col-sm-8">

                </div>
            </div>
            <div id="tree"></div>
        </form>
        </div>
    </div>
    <div class="col-xs-6">
        <div style="padding: 15px;border: solid 1px; border-color: #dddddd; margin-top:15px">
            <div class="row">
                <div class="col-xs-10">
                    <label>订单渠道详情</label>
                </div>

                <div class="col-xs-2">
                    <a class="layui-btn layui-btn-sm layui-btn-normal edit-btn" onclick="editfunction()">
                        <i class="layui-icon">&#x1005;</i> 修改
                    </a>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <form class="form-horizontal" role="form" id="functionedit_form">
                        <!--<div class="form-group" style="display: none">
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="appId" name="appId"/>
                            </div>
                        </div>
                        <div class="form-group pId" style="display: none">
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="fjd" name="fjd"/>
                            </div>
                        </div>-->
                        <div class="form-group">
                            <label for="mc" class="col-sm-2 control-label">渠道名称</label>
                            <div class="col-sm-4">
                                <span name="mc" id="mc2">
                                <input type="hidden" name="mc" />
                                </span>

                            </div>
                            <label for="code" class="col-sm-2 control-label">渠道编号</label>
                            <div class="col-sm-4">
                                <span name="code" id="code2"></span>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="ms" class="col-sm-2 control-label">描述</label>
                            <div class="col-sm-10">
                                <span name="ms" id="ms2"></span>
                            </div>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div style="padding: 0px 15px;" hidden="hidden" id="addfunction">
    <div class="row">
        <div class="col-xs-12">
            <form class="form-horizontal" role="form" id="functionadd_form">
                <div class="form-group" style="display: none">
                    <div class="col-sm-8">
                        <input type="text" class="form-control" id="id"  name="id" />
                    </div>
                </div>
                <div class="form-group pId" style="display: none">
                    <div class="col-sm-8">
                        <input type="text" class="form-control" id="fjd" name="fjd"/>
                    </div>
                </div>
                <div class="form-group">
                    <label for="mc" class="col-sm-2 control-label">渠道名称</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="mc" name="mc" placeholder="请输入渠道名称" />
                    </div>
                </div>
                <div class="form-group">
                    <label for="code" class="col-sm-2 control-label">渠道编号</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="code" name="code" placeholder="请输入渠道编号" />
                    </div>
                </div>
                <div class="form-group">
                    <label for="ms" class="col-sm-2 control-label">描述</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="ms" name="ms" placeholder="请输入描述" />
                    </div>
                </div>

            </form>
        </div>
    </div>
</div>


<div style="padding: 0px 15px;" hidden="hidden" id="editfunction">
    <div class="row">
        <div class="col-xs-12">
            <form class="form-horizontal" role="form" id="edit_form">
                <div class="form-group" style="display: none">
                    <div class="col-sm-8">
                        <input type="text" class="form-control" id="editId"  name="id" />
                    </div>
                </div>
                <div class="form-group pId" style="display: none">
                    <div class="col-sm-8">
                        <input type="text" class="form-control" id="editFjd" name="fjd"/>
                    </div>
                </div>
                <div class="form-group">
                    <label for="mc" class="col-sm-2 control-label">渠道名称</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="editMc" name="mc" placeholder="请输入渠道名称" />
                    </div>
                </div>
                <div class="form-group">
                    <label for="code" class="col-sm-2 control-label">渠道编号</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="editCode" name="code" placeholder="请输入渠道编号" />
                    </div>
                </div>
                <div class="form-group">
                    <label for="ms" class="col-sm-2 control-label">描述</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="editMs" name="ms" placeholder="请输入描述" />
                    </div>
                </div>

            </form>
        </div>
    </div>
</div>
<style>
    .waring{
        color: red;
        position: absolute;
        left: 1rem;
    }
    .form-group{
        margin: 2rem auto;
    }
</style>

</body>
<!--
<script src="/zxsdwms/plugin/bootstrap-treeview/js/bootstrap-treeview.js"></script>
-->
<div th:include="public/public_js::public_js"></div>
<script>
    var temp = new Object();//一个中间变量用来传递参数
    $(function () {
        alert("开始啦。。。")
        var tree = function () {
            $.ajax({
                type: "POST",
                url: "/zxsdwms/wmsorderchannel/list",
                dataType: "JSON",
                async: false,
                success: function (data) {
                    //将数据添加到省份这个下拉框里面
                    var resultMap = eval(data);
                    var map={};
                    map.mc="订单渠道";
                    map.children=resultMap;
                    map.nodes=resultMap;
                    var maps=[];
                    maps.push(map);
                    maps.forEach(function (e) {//遍历集合
                        serializ(e);//把集合的每一项放到序列化方法中序列化
                    });

                    $('#tree').treeview({//树结构初始化，具体参数查阅bootstrap-treeview中文api
                        color: "#428bca",
                        showBorder: true,
                        data: maps,
                        selectable: true,
                        highlightSelected: true,
                        multiSelect: false,       //多选
                        onNodeSelected: function (event, data) {
                            console.info(data)
                            $("#mc2").html(data.mc);
                            $("#editMc").val(data.mc);
                            $("#code2").html(data.code);
                            $("#editCode").val(data.code);
                            $("#ms2").html(data.ms);
                            $("#editMs").val(data.ms);
                            $("#editId").val(data.id);
                            $("#editFjd").val(data.fjd);

                        }
                    });

                },
                error: function () { alert("Error"); }
            });
        }
        var init =function () {
            tree();
        }
        init()//初始化
    })
    //序列化方法 将ajax的数据序列化为树型结构
    function serializ(e,level) {
        e.text = e.mc;//bootstrap-treeview只显示名为text的属性
        //添加 增、改、删按钮
        e.text +="<div style='float: right'>" +
            "<button class =\" button button-primary button-tiny button-box\" name = \""+ e.id+"\"  onclick='addfunction(this)'>" +
            "<i class=\" fa fa-plus\"></i>" +
            "</button>" +
          /*  "<button class =\" button button-action button-tiny button-box\" name = \""+ e.id+"\" style=\"margin-left: 3px\" onclick='editfunction(this)'>" +
            "<i class=\" fa fa-edit\"></i>" +
            "</button>" +
            "<button class =\" button button-caution button-tiny button-box\" name = \""+ e.id+"\" style=\"margin-left: 3px\" onclick='deletefunction(this)'>" +
            "<i class=\" fa fa-remove\"></i>" +
            "</button>" +*/
            "</div>";
        if(level === null){//如果第一次进入序列化方法给他一个level属性来标记等级
            e.level = 1;
        }else {
            e.level += 1;//如果不是第一级 那么当前level+1
        }
        if(e.children !=null , e.children!=""){//如果当前节点有子节点就把子节点也序列化直到全部节点序列化完毕
            e.children.forEach(function (e) {
                serializ(e,level);
            })
            e.nodes = e.children;//他的子节点只认nodes
        }else {
            e.last = true ;
        }
    }
    function form_sub() {
        ajaxs('/safeGate/app/add', 'POST', $("#add_form").serialize(), true, function(data){
            if(data.messageType === 2) {
                layer.msg(data.message);
                $("#groupTable").bootstrapTable('refresh');//刷新DOM
            } else {
                layer.msg(data.message);
            }
        });
    }


    layui.use(['list','layer','zzpUtils','jquery','laydate'],function () {
       var zzpUtils=layui.zzpUtils;

          window.addfunction=function(e) {
              console.info("hah");
              console.info(e)
              console.info("we");
              console.info(e.name)
            var a = $(e).attr("name");
            temp.pId = a;
            temp.appId = $("#id").val()
            layer.open({
                type: 1,
                title: "新增订单渠道",
                content: $("#addfunction"),
                area:['550px'],
                shade: 0,
                success: function(layero, index){
                    $("input[name = appId]").val(temp.appId);
                    $("input[name = fjd]").val(temp.pId);
                    $("#mc").val("");
                    var a = temp.pId
                    if (a.indexOf("_") > 0){
                        console.log(1)
                        $(".pId").remove();
                    }
                }
                ,btn: ['保存','关闭']
                ,yes: function(index, layero){
                    var formObject = {};
                    //自动将form表单封装成json
                    var formArray =$("#functionadd_form").serializeArray();
                    $.each(formArray,function(i,item){
                        formObject[item.name] = item.value;
                    });
                    var formJson = JSON.stringify(formObject);
                    console.info(formJson);
                    $.ajax({
                        type: "POST",
                        url: "/zxsdwms/wmsorderchannel/add",
                        data:formJson,
                        contentType: 'application/json',
                        async: false,
                        success: function (data) {
                            console.info("data");
                            console.info(data);
                            if(data.messageType === 2) {
                                top.layer.msg(data.title+","+data.message);
                                layer.close(index);
                                $("input[name = appId]").val("");
                                $("input[name = pId]").val("");
                                $("input[name = fName]").val("");
                                $("input[name = fCode]").val("");
                                var tree = function () {
                                    $.ajax({
                                        type: "POST",
                                        url: "/zxsdwms/wmsorderchannel/list",
                                        dataType: "JSON",
                                        async: false,
                                        success: function (data) {
                                            //将数据添加到省份这个下拉框里面
                                            var resultMap = eval(data);
                                            var map={};
                                            map.mc="订单渠道";
                                            map.children=resultMap;
                                            map.nodes=resultMap;
                                            var maps=[];
                                            maps.push(map);
                                            maps.forEach(function (e) {//遍历集合
                                                serializ(e);//把集合的每一项放到序列化方法中序列化
                                            });
                                            console.log(resultMap);
                                            $('#tree').treeview({//树结构初始化，具体参数查阅bootstrap-treeview中文api
                                                color: "#428bca",
                                                showBorder: true,
                                                data: maps,
                                                selectable: true,
                                                highlightSelected: true,
                                                multiSelect: false,       //多选
                                                onNodeSelected: function (event, data) {
                                                    console.log(1)
                                                    console.info(data)
                                                    $("#mc2").html(data.mc);
                                                    $("#editMc").val(data.mc);
                                                    $("#code2").html(data.code);
                                                    $("#editCode").val(data.code);
                                                    $("#ms2").html(data.ms);
                                                    $("#editMs").val(data.ms);
                                                    $("#editId").val(data.id);
                                                    $("#editFjd").val(data.fjd);
                                                    statictemp = data;
                                                }
                                            });
                                        },
                                        error: function () { alert("Error"); }
                                    });
                                }
                                var init =function () {
                                    tree();
                                }
                                init();
                            } else {
                                layer.msg(data.message);
                            }
                        },
                        error: function () { alert("Error"); }
                    });
                }
                ,btn2 : function (index, layero) {
                    layer.close(index);
                    $("input[name = id]").val("");
                    $("input[name = fjd]").val("");
                    $("input[name = mc]").val("");
                    $("input[name = code]").val("");
                    $("input[name = ms]").val("");
                }
            })
            console.log(a);
          }


        window.editfunction=function(e) {
            var a = $(e).attr("name");
            temp.pId = a;
            temp.appId = $("#id").val()
            layer.open({
                type: 1,
                title: "编辑订单渠道",
                content: $("#editfunction"),
                area:['550px'],
                shade: 0,
                success: function(layero, index){
                   /* $("input[name = appId]").val(temp.appId);
                    $("input[name = fjd]").val(temp.pId);
                    $("#mc").val("");
                    var a = temp.pId*/
                    /*if (a.indexOf("_") > 0){
                        console.log(1)
                        $(".pId").remove();
                    }*/
                }
                ,btn: ['保存','关闭']
                ,yes: function(index, layero){
                    var formObject = {};
                    //自动将form表单封装成json
                    var formArray =$("#edit_form").serializeArray();

                    $.each(formArray,function(i,item){
                        formObject[item.name] = item.value;
                    });
                    var formJson = JSON.stringify(formObject);
                    console.info(formJson);
                    $.ajax({
                        type: "POST",
                        url: "/zxsdwms/wmsorderchannel/edit",
                        data:formJson,
                        contentType: 'application/json',
                        async: false,
                        success: function (data) {
                           alert(data);
                            console.info(data);
                            if(data.messageType === 2) {
                                top.layer.msg(data.title+","+data.message);
                                layer.close(index);
                                var ob=data.data;
                                $("#mc2").html(ob.mc);
                                $("#ms2").html(ob.ms);
                                $("#code2").html(ob.code);
                              /*  $("input[name = appId]").val("");
                                $("input[name = pId]").val("");
                                $("input[name = fName]").val("");
                                $("input[name = fCode]").val("");*/
                                var tree = function () {
                                    $.ajax({
                                        type: "POST",
                                        url: "/zxsdwms/wmsorderchannel/list",
                                        dataType: "JSON",
                                        async: false,
                                        success: function (data) {
                                            //将数据添加到省份这个下拉框里面
                                            var resultMap = eval(data);
                                            var map={};
                                            map.mc="订单渠道";
                                            map.children=resultMap;
                                            map.nodes=resultMap;
                                            var maps=[];
                                            maps.push(map);
                                            maps.forEach(function (e) {//遍历集合
                                                serializ(e);//把集合的每一项放到序列化方法中序列化
                                            });

                                            console.log(resultMap);
                                            $('#tree').treeview({//树结构初始化，具体参数查阅bootstrap-treeview中文api
                                                color: "#428bca",
                                                showBorder: true,
                                                data: maps,
                                                selectable: true,
                                                highlightSelected: true,
                                                multiSelect: false,       //多选
                                                onNodeSelected: function (event, data) {
                                                    console.log(1)
                                                    $("#mc2").html(data.mc);
                                                    $("#editMc").val(data.mc);
                                                    $("#code2").html(data.code);
                                                    $("#editCode").val(data.code);
                                                    $("#ms2").html(data.ms);
                                                    $("#editMs").val(data.ms);
                                                    $("#editId").val(data.id);
                                                    $("#editFjd").val(data.fjd);

                                                    statictemp = data;
                                                }
                                            });
                                        },
                                        error: function () { alert("Error"); }
                                    });
                                }
                                var init =function () {
                                    tree();
                                }
                                init();
                            } else {
                                layer.msg(data.message);
                            }
                        },
                        error: function () { alert("Error"); }
                    });
                }
                ,btn2 : function (index, layero) {
                    layer.close(index);
                    $("input[name = id]").val("");
                    $("input[name = fjd]").val("");
                    $("input[name = mc]").val("");
                    $("input[name = code]").val("");
                    $("input[name = ms]").val("");
                }
            })
            console.log(a);
        }
        /*$(".edit-btn").on('click',function () {
            alert("edit-btn");
            /!* if($rows.length != 1){
             layer.msg("请选择一条进行编辑");
             }else{*!/
            /!*var id = $.map($rows,function (row) {
             return row.id;
             })*!/
            zzpUtils.dialog({
                title: "修改订单渠道",
                type: 2,
                area: ['40%', '45%'],
                content: "/wmsorderchannel/editOrderChannel?id=" + id,
                end: function () {//添加成功后刷新
                    zzpUtils.refreshTable("#table");
                }

            })
            //   }


        })*/
    })

    /*function editfunction(e) {
        console.info("hah");
        console.info(e)
        alert("editfunction");
        var a = $(e).attr("name");
        temp.pId = a;
        temp.appId = $("#id").val()

        layer.open({
            type: 1,
            title: "新增",
            content: $("#addfunction"),
            area:['550px'],
            shade: 0,
           /!*success: function(layero, index){
                $("input[name = appId]").val(temp.appId);
                $("input[name = fjd]").val(temp.pId);
                var a = temp.pId
                if (a.indexOf("_") > 0){
                    console.log(1)
                    $(".pId").remove();
                }
            }
            ,*!/
            btn: ['保存','关闭']
            ,yes: function(index, layero){
                var formObject = {};
                //自动将form表单封装成json
                var formArray =$("#functionadd_form").serializeArray();
                $.each(formArray,function(i,item){
                    formObject[item.name] = item.value;
                });
                var formJson = JSON.stringify(formObject);
                console.info(formJson);
                $.ajax({
                    type: "POST",
                    url: "/zxsdwms/wmsorderchannel/edit",
                    data:formJson,
                    contentType: 'application/json',
                    async: false,
                    success: function (data) {
                        console.info("data");
                        console.info(data);
                        if(data.messageType === 2) {
                            top.layer.msg(data.title+","+data.message);
                            layer.close(index);
                            $("input[name = id]").val("");
                            $("input[name = fjd]").val("");
                            $("input[name = mc]").val("");
                            $("input[name = code]").val("");
                            $("input[name = ms]").val("");
                            $("#mc").val("");
                            alert("333");
                            alert($("#mc").val());
                            var tree = function () {
                                $.ajax({
                                    type: "POST",
                                    url: "/zxsdwms/wmsorderchannel/list",
                                    dataType: "JSON",
                                    async: false,
                                    success: function (data) {
                                        alert(data);
                                        //将数据添加到省份这个下拉框里面
                                        var resultMap = eval(data);
                                        resultMap.forEach(function (e) {//遍历集合
                                            serializ(e);//把集合的每一项放到序列化方法中序列化
                                        })
                                        console.log(resultMap);
                                        $('#tree').treeview({//树结构初始化，具体参数查阅bootstrap-treeview中文api
                                            color: "#428bca",
                                            showBorder: true,
                                            data: resultMap,
                                            selectable: true,
                                            highlightSelected: true,
                                            multiSelect: false,       //多选
                                            onNodeSelected: function (event, data) {
                                                $("#mc2").html(data.mc);
                                                $("#mc").val(data.mc);
                                                $("#code2").html(data.code);
                                                $("#code").val(data.code);
                                                $("#ms2").html(data.ms);
                                                $("#ms").val(data.ms);
                                                $("#id").val(data.id);

                                                $("#fjd").val(data.fjd);
                                            }
                                        });
                                    },
                                    error: function () { alert("Error"); }
                                });
                            }
                            var init =function () {
                                tree();
                            }
                            init();
                        } else {
                            layer.msg(data.message);
                        }
                    },
                    error: function () { alert("Error"); }
                });
            }
            ,btn2 : function (index, layero) {
                layer.close(index);
                $("input[name = id]").val("");
                $("input[name = fjd]").val("");
                $("input[name = mc]").val("");
                $("input[name = code]").val("");
                $("input[name = ms]").val("");
                $("#mc").val("");
            }
        })
        console.log(a);
    }*/
    function deletefunction(e){
        var a = $(e).attr("name");
        if (a != null) {
            var funtionids = new Array();
            funtionids[0] = a;
            var str = funtionids.join(",");
            var r = confirm("是否确认删除?");
            if (r == true) {
                $.ajax({
                    type: "POST",
                    url: './function/delete',
                    data: {ids: str},
                    success: function (data) {
                        if (data.messageType === 2) {
                            var tree = function () {
                                ajaxs('./function/' +$("#id").val(), 'GET', null, true, function (result) {
                                    console.log(result)
                                    if (result != null, result != "") {
                                        var resultMap = eval(result);
                                        resultMap.forEach(function (e) {
                                            serializ(e);
                                        })
                                        $('#tree').treeview({
                                            color: "#428bca",
                                            showBorder: true,
                                            data: resultMap,
                                            selectable: true,
                                            highlightSelected: true,
                                            multiSelect: false,       //多选
                                            onNodeSelected: function (event, data) {
                                                console.log(1)
                                                statictemp = data;
                                            }
                                        });
                                    }
                                });
                            }
                            var init =function () {
                                tree();
                            }
                            init();
                            layer.msg(data.message, {icon: 1});
                        } else {
                            layer.msg("删除失败", {icon: 2});
                        }
                    }
                });
            }
        } else {
            confirm("数据错误请联系管理员...");
        }
    }
</script>
</html>